<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>


  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>

  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });

    fetch('data/chengjidata.json').then(r => r.json()).then((chengjidata) => {
      var app = {};
      let json = chengjidata['routes']
      let stations = chengjidata['stations']



      var option;

      option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'time',
          min: '2024-07-01 00:00:00',
          max: '2024-07-01 23:59:99',
        },
        yAxis: {
          type: 'category',
          data: stations
        },
        _series: [
          {
            name: "C7903",
            data: [
              [
                '2024-07-01 06:45:00', "佛山西"


              ], ['2024-07-01 06:51:00', "狮山"]





            ],
            type: 'line'
          }
        ],
        legend: {
          data: json.map(j => j['车次']),
          height: "20%"
        },
        grid: {

          top: '20%'
        },
        series: (() => {
          return json.map((route) => {

            let routeReturnJson = {
              name: route['车次'],
              data: [
              ],



              type: 'line'
            }

            Object.keys(route).forEach((key) => {
              let val = route[key];
              if (val?.includes(':')) {
                routeReturnJson.data.push(
                  [`2024-07-01 ${val}:00`, key]
                )


              }
            })
            return routeReturnJson



          })


        })()
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    })



    window.addEventListener('resize', () => {
      myChart?.resize()
    });
  </script>
</body>

</html>